<template>
  <div class="Seat">
    <!-- header star -->
    <div class="header">
      <div class="screen">
        <img src="../assets/icon-screen.png" alt="" />
      </div>
      <div class="screen-title">4号激光厅</div>
    </div>
    <!-- header end -->

    <!-- body star -->
    <div class="body" ref="body" >
      <!-- 左侧标识行box star  -->
      <div class="rowBox" ref="rowBox" >
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <div  v-for="(item,index) in json_data" :key="index"  v-if="dataBol" class="rowBoxItem"
        :style="{  height: seatWidth + 'px', marginTop:index==0? 0 :seatSpacing+'px'}">
          {{index+1}}
        </div>
      </div>
      <!-- 左侧标识行box end  -->

      <!-- 座位box star -->
      <div class="box" ref="dragBox" @touchstart="touchstartHandle('dragBox',$event)" @touchend="touchendHandle('dragBox',$event)"
         @touchmove="touchmoveHandle('dragBox',$event)"
         :style="{padding:seatSpacing*0.5+'px', boxSizing: 'border-box'}"
         >
         <!-- 中心线 -->
         <div class="centerLine" :style="{width:(columnsTotal*seatSpacing+columnsTotal*seatWidth)-seatSpacing+'px'}" v-if="dataBol"></div>
         <div class="row">
            <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
            <Row  v-if="dataBol"
             :rowData="json_data" :boxWH="seatWidth" :boxSpacing="seatSpacing" @result="reusetM" />
         </div>

      </div>
       <!-- 座位box end -->
    </div>
    <!-- body end -->

    <!-- footer star -->
    <div class="footer">
        <div class="SeatInfo">
            <div v-for="(item,index) in selectedList" :key="index" class="item">
                <span>{{item.seatNo}}</span>
                <span>￥ 56:00</span>
            </div>
        </div>
    </div>
    <!-- footer end -->
  </div>
</template>

<script>
import json from '../json_data'
import Row from '../components/Row'
export default {
  name: 'Seat',
  components: { Row },
  props: {

  },
  data () {
    return {
      coordinate: {
        client: {},
        elePosition: {}
      },
      dataBol: false, // 数据加载完
      // 最终位置
      final_position: {
        x: 0,
        y: 0
      },
      // 总列数
      columnsTotal: 0,
      // 缩放
      zoom: 5,
      // 座位数据
      json_data: json.data,
      // 座位宽高
      seatWidth: 0,
      // 座位间距
      seatSpacing: 0,

      // 选中的座位
      selectedList: []

    }
  },
  mounted () {
    this.initData()
  },
  created () {

  },
  methods: {
    initData () {
      var arr = this.json_data
      const map = {}

      for (let i = 0; i < arr.length; i++) {
        const ai = arr[i]
        if (!map[ai.rowNo]) {
          map[ai.rowNo] = [ai]
        } else {
          map[ai.rowNo].push(ai)
        }
      }
      const res = []
      Object.keys(map).forEach(key => {
        res.push({
          rowNo: key,
          data: map[key]
        })
      })
      this.json_data = res

      // 计算每个座位的宽度 （宽度-宽度*1%）/总列数
      // 总列数
      var that = this
      res.forEach(function (item) {
        that.columnsTotal = item.data.length > that.columnsTotal ? item.data.length : that.columnsTotal
      })

      // 盒子宽度
      const boxWidth = this.$refs.dragBox.offsetWidth

      // 座位间距 宽度*2%
      this.seatSpacing = boxWidth * 0.02

      // 座位宽度
      this.seatWidth = (boxWidth - this.seatSpacing * this.columnsTotal) / this.columnsTotal

      this.dataBol = true
    },
    touchstartHandle (refName, e) {
      const element = e.targetTouches[0]
      // 记录点击的坐标
      this.coordinate.client = {
        x: element.clientX,
        y: element.clientY
      }

      // 记录需要移动的元素坐标
      this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
      this.coordinate.elePosition.top = this.$refs[refName].offsetTop
    },
    touchmoveHandle (refName, e) {
      const element = e.targetTouches[0]
      // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
      const x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
      const y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)

      // 移动当前元素
      this.$refs[refName].style.left = x + 'px'
      this.$refs[refName].style.top = y + 'px'
      // 左侧标识栏
      this.$refs.rowBox.style.top = y + 'px'

      // 记录最终位置
      this.final_position.x = x
      this.final_position.y = y
    },
    touchendHandle (refName, e) {
      const ratio = 0.6 // 上限为1,数值越大，回到x0 y0的距离越大。例如设置为0时，拖动一点就回到初始
      const y = this.final_position.y + this.$refs[refName].offsetHeight
      const x = this.final_position.x + this.$refs[refName].offsetWidth
      // console.log(this.$refs.body.offsetHeight + this.$refs.body.offsetHeight * 0.1)
      // 如果超出可视范围将回到x0 y0状态
      if (y > this.$refs.body.offsetHeight + this.$refs.body.offsetHeight * ratio ||
           y < this.$refs[refName].offsetHeight - this.$refs[refName].offsetHeight * ratio) {
        this.$refs[refName].style.left = '0px'
        this.$refs[refName].style.top = '0px'
        this.$refs.rowBox.style.top = '0px'
      }

      if (x > this.$refs.body.offsetWidth + this.$refs.body.offsetWidth * ratio ||
        x < this.$refs[refName].offsetWidth - this.$refs[refName].offsetWidth * ratio) {
        this.$refs[refName].style.left = '0px'
        this.$refs[refName].style.top = '0px'
        this.$refs.rowBox.style.top = '0px'
      }
    },
    // 返回的选座信息
    reusetM (val) {
      this.selectedList = val
    }
  }
}
</script>

<style scoped lang="scss">
.Seat {
  width: 100%;
  position: absolute;
  height: 100%;
}
.header {
  width: 100%;
  height: 10%;

}

.body {
  position: relative;
  width: 100%;
  height: 60%;
  background: #999;
  overflow: hidden;
}
.footer {
  width: 100%;
  height: 30%;
  padding: 10px;
  box-sizing: border-box;
}
.screen {
  width: 100%;
  display: flex;
  justify-content: center;
}
.screen img {
  width: 70%;
}
.screen-title {
  width: 100%;
  text-align: center;
  font-size: 0.2rem;
  color: #999;

}
.box {
    position: absolute;
    // left: 30px;
    width: 100%;
    height: 100%;
    background-color: #3ab5a0;
}
.rowBox{
  position: absolute;
  left: 0px;
  width: 20px;
  background: #6d6e6f;
  opacity: .4;
  border-radius: 50px;
  z-index: 5;
}
.rowBoxItem{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
// 中心线
.centerLine{
    position: absolute;
    height: 200%;
    border-right: 1px dashed #d6d6d6;
    transform: scale(.5);
    transform-origin: 0 0;
}
.row{
  width: 100%;
}
.SeatInfo{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer .item{
  width: 24%;
  height: 50px;
  background: #fff;
  box-shadow:2px 2px 10px #d3d2d2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footer .item span:first-child{
  font-weight: 700;
}

</style>
